<template>
	<div>
	  <el-row>
		<el-col :span="8"><label>请输入用户名</label></el-col>
		<el-col :span="8"><el-input v-model="searchName"></el-input></el-col>
		<el-col :span="8">
		  <el-button type="danger" size="large" @click="loadUserList()">搜索</el-button>
		  <el-button type="primary" size="large" @click="showAddDialog">添加用户</el-button>
		</el-col>
	  </el-row>
	  
	  <!-- 添加用户对话框 -->
	  <el-dialog v-model="addDialogVisible" title="添加用户">
		<el-form :model="addForm">
		  <el-form-item label="用户名">
			<el-input v-model="addForm.uname"></el-input>
		  </el-form-item>
		  <el-form-item label="密码">
			<el-input v-model="addForm.upwd" type="password"></el-input>
		  </el-form-item>
		</el-form>
		<template #footer>
		  <el-button @click="addDialogVisible = false">取消</el-button>
		  <el-button type="primary" @click="addUser">确定</el-button>
		</template>
	  </el-dialog>
  
	  <!-- 编辑用户对话框 -->
	  <el-dialog v-model="editDialogVisible" title="编辑用户">
		<el-form :model="editForm">
		  <el-form-item label="用户编号">
			<el-input v-model="editForm.uid" disabled></el-input>
		  </el-form-item>
		  <el-form-item label="用户名">
			<el-input v-model="editForm.uname"></el-input>
		  </el-form-item>
		  <el-form-item label="密码">
			<el-input v-model="editForm.upwd" type="password"></el-input>
		  </el-form-item>
		</el-form>
		<template #footer>
		  <el-button @click="editDialogVisible = false">取消</el-button>
		  <el-button type="primary" @click="updateUser">确定</el-button>
		</template>
	  </el-dialog>
  
	  <el-table :data="userlist">
		<el-table-column prop="uid" label="用户编号" width="200"></el-table-column>
		<el-table-column prop="uname" label="用户名" width="200"></el-table-column>
		<el-table-column prop="ustatus" label="状态值" width="200">
		  <template #default="scope">
			<el-tag :type="scope.row.ustatus === 0 ? 'success' : 'danger'">
			  {{ scope.row.ustatus === 0 ? '启用' : '禁用' }} 
			</el-tag> 
		  </template>
		</el-table-column>
		<el-table-column align="right" label="操作" width="150">
		  <template #default="scope">
			<el-button size="small" @click="showEditDialog(scope.row)">编辑</el-button>
			<el-button size="small" type="danger" @click="deleteRow(scope.$index,scope.row)">删除</el-button>
		  </template>
		</el-table-column>
	  </el-table>
	  
	  <el-pagination
		@size-change="handleSizeChange"
		@current-change="handleCurrentChange"
		:current-page="pagination.page"
		:page-sizes="[5, 10, 20, 30]"
		:page-size="pagination.limit"
		layout="total, sizes, prev, pager, next, jumper"
		:total="pagination.total">
	  </el-pagination>
	</div>
  </template>
  
  <script>
  import axios from 'axios'
  import { useUserInfoStore } from "../pinia/userinfo"
  export default {
	data() {
	  return {
		userlist: [],
		searchName: '',
		sprheaders: {
		  uname: "1111",
		  token: "12121212"
		},
		addDialogVisible: false,
		editDialogVisible: false,
		addForm: {
		  uname: '',
		  upwd: ''
		},
		editForm: {
		  uid: '',
		  uname: '',
		  upwd: ''
		},
		pagination: {
		  page: 1,  // 当前页码
		  limit: 10, // 每页行数
		  total: 0   // 总记录数
		}
	  }
	},
	created() {
	  const userStore = useUserInfoStore();
		this.sprheaders.uname = userStore.getUsername
		this.sprheaders.token = userStore.getToken
	  this.loadUserList()
	},
	methods: {
	  loadUserList() {
		var that = this
		const params = {
		  uname: that.searchName,
		  page: that.pagination.page,
		  limit: that.pagination.limit
		}
		
		axios.get(this.$baseUrl.SPRURL+"v2/user/user", {
		  headers: that.sprheaders,
		  params: params
		}).then(res => {
		  if (res.data.code == 0) {
			that.userlist =  res.data.data
			that.pagination.total = res.data.count 
		  } else {
			alert("网络错误！")
		  }
		}).catch(res => {
		  console.log(JSON.stringify(res))
		})
	  },
	  handleSizeChange(val) {
		this.pagination.limit = val
		this.loadUserList()
	  },
	  handleCurrentChange(val) {
		this.pagination.page = val
		this.loadUserList()
	  },
	  searchUser() {
		// 搜索用户逻辑
		this.loadUserList()
	  },
	  showAddDialog() {
		this.addDialogVisible = true
		this.addForm = {
		  uname: '',
		  upwd: ''
		}
	  },
	  showEditDialog(row) {
		this.editDialogVisible = true
		this.editForm = {
		  uid: row.uid,
		  uname: row.uname,
		  upwd: row.upwd
		}
	  },
	  addUser() {
		var that = this
		axios.post(this.$baseUrl.SPRURL+"v2/user/user", this.addForm, {
		  headers: that.sprheaders
		}).then(res => {
		  if (res.data.code == 0) {
			this.$message.success('添加成功')
			this.addDialogVisible = false
			this.loadUserList()
		  } else {
			this.$message.error(res.data.msg || '添加失败')
		  }
		}).catch(error => {
		  this.$message.error('网络错误')
		})
	  },
	  updateUser() {
		var that = this
		axios.put(this.$baseUrl.SPRURL+"v2/user/user", this.editForm, {
		  headers: that.sprheaders
		}).then(res => {
		  if (res.data.code == 0) {
			this.$message.success('更新成功')
			this.editDialogVisible = false
			this.loadUserList()
		  } else {
			this.$message.error(res.data.msg || '更新失败')
		  }
		}).catch(error => {
		  this.$message.error('网络错误')
		})
	  },
	  deleteRow(index, row) {
		var that = this
		this.$confirm('确认删除该用户吗?', '提示', {
		  confirmButtonText: '确定',
		  cancelButtonText: '取消',
		  type: 'warning'
		}).then(() => {
		  axios.delete(this.$baseUrl.SPRURL+"v2/user/user/"+row.uid, {
			headers: that.sprheaders
		  }).then(res => {
			if (res.data.code == 0) {
			  this.$message.success('删除成功')
			  this.loadUserList()
			} else {
			  this.$message.error(res.data.msg || '删除失败')
			}
		  }).catch(error => {
			this.$message.error('网络错误')
		  })
		}).catch(() => {
		  this.$message.info('已取消删除')
		})
	  }
	}
  }
  </script>